import React, {Component} from 'react'
import {connect} from 'react-redux'
import { List , Button ,Toast} from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
import {parseQuery} from "../../utils/tools"

class OrderItemLM extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedPeiyu: this.getItemsAsArray(props.items),
      money:this.props.baseinfo.money,
    };
  }
  

  getMinLimit() {
    const {platform, location} = this.props;
    let query = parseQuery(location.search);
    if (platform['betInfo']) {
      return platform['betInfo']['minLimit'][query.pankou.toUpperCase()];
    }
  }

  getMaxLimit() {
    const {platform, location} = this.props;
    let query = parseQuery(location.search);
    if (platform['betInfo']) {
      return platform['betInfo']['maxLimit'][query.pankou.toUpperCase()];
    }
  }

  getPeriodLimit() {
    const {platform, location} = this.props;
    let query = parseQuery(location.search);
    if (platform['betInfo']) {
      return platform['betInfo']['maxPeriodLimit'][query.pankou.toUpperCase()];
    }
  }

  getItemsAsArray(selectedPeiyu) {
    let itemsArray = [];
    for (var key in selectedPeiyu) {
      itemsArray.push(selectedPeiyu[key]);
    }
    return itemsArray;
  }

  onSubmit() {
    const {location,user} = this.props;
    if(!this.state.money){
      return  Toast.fail('请输入下注金额',2);
    }
    if(this.state.money > user.get('info').userMoney){
      return  Toast.fail('下注金额超出您的余额',2);
    }
    const  preOrder = this.props.betcenter.get('preOrderList')
    let query = parseQuery(location.search);
    let token = preOrder.token;
    let items = [{
      token,
      xzje: this.state.money,
      typeCode: query.pankou,
      cateCode: 0
    }];
    this.props.onSubmit(items, 'lm');
  }

  onMoneyInput() {
    if(this.refs.money.value%1 !==0){
      this.refs.money.value = ~~this.refs.money.value
      return Toast.fail("下注金额必须为整数",1)
    }
    this.setState({
      money: this.refs.money.value
    });
  }

  componentDidMount(){
    let {money} = this.state
    if(money){
        this.refs.money.value = money
    }
  }
  render() {
    const  preOrder = this.props.betcenter.get('preOrderList')
    var {name} = this.props.baseinfo
    return (
      <div className="member-bet-items">
        <div className="inner">
              <div className="item">
                <div  className="orderitem">
                <div className="left">
                <input type="number" ref="money" onChange={this.onMoneyInput.bind(this)}
                placeholder="输入金额" min={this.getMinLimit()} max={this.getMaxLimit()} />
                </div>
                <div className="desc red">{name + "-连码"}</div>
                <div className="tips"><span>单注{this.getMinLimit()}-{this.getMaxLimit()}元</span> <span>单期最高{this.getPeriodLimit()}元</span></div>
              </div>
              </div> 
 
        </div>
        <div className="preorder-items">
          {preOrder.orderList && preOrder.orderList.map((item, index) => {
            return (
              <div key={index} className="preorder-item">
                <p><span>{item.xzlxName}</span><span>{item.number}</span> 赔率：<span dangerouslySetInnerHTML={ {__html: item.rate} }></span></p>
              </div>
            );
          })}
      </div>
        <div className="bottomorder">
                  <List.Item
                  extra={<Button type="warning" size="small" style={{height:"40px",lineHeight:"40px"}} inline onClick={this.onSubmit.bind(this)}>确认投注</Button>}
                >
                  <span className="red">{preOrder.orderList && preOrder.orderList.length}</span>注
                  共<span className="red">{preOrder.orderList && preOrder.orderList.length*this.state.money}</span>元
                  </List.Item>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    betcenter: state.betcenter
  }
}

export default connect(mapStateToProps)(OrderItemLM)